<template>
  <div style="margin-top: 5px;">
    <titleBox text="网格实时动态"></titleBox>
    <div class="content">
      <div class="top">
        <div class="top_item" @click="wgssztModalRefShow">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">待处理</div>
          <div class="top_item_num">6</div>
        </div>
        <div class="top_item" @click="wgssztModalRefShow" style="margin: 0 10px;">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">处理中</div>
          <div class="top_item_num">6</div>
        </div>
        <div class="top_item" @click="wgssztModalRefShow">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">已处理</div>
          <div class="top_item_num">6</div>
        </div>
      </div>
      <mTable :titleData="titleData" :valueData="valueData"></mTable>

    </div>

    <wgssztModal ref="wgssztModalRef" @rowClick="wgssztModalRowClick"></wgssztModal>
    <sjxqModal ref="sjxqModalRef"  @close="sjxqModalClose"></sjxqModal>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  import titleBox from "../mConponents/titleBox.vue"
  import mTable from "../mConponents/mTable.vue"
  import wgssztModal from "../mConponents/modal/wgssztModal.vue"
  import sjxqModal from "../mConponents/modal/sjxqModal.vue"

  const wgssztModalRef = ref(null)
  const sjxqModalRef = ref(null)

  const wgssztModalRefShow = () => {
    wgssztModalRef.value.show()
  }
  const wgssztModalRowClick = () => {
    wgssztModalRef.value.close()
    sjxqModalRef.value.show()
  }
  const sjxqModalClose = () => {
    // sjxqModalRef.value.close()
    wgssztModalRef.value.show()
  }


  const titleData = [
    {
      name: "内容",
      key: "content",
      align: true,
      style: {
        flex: 1,
        textAlign: "left"
      }
    },
    {
      name: "类型",
      key: "type",
      style: {
        width: "50px"
      }
    },
    {
      name: "状态",
      key: "state",
      style: {
        width: "50px"
      }
    },
    {
      name: "创建时间",
      key: "date",
      style: {
        width: "80px"
      }
    }
 ]
  const valueData = [
    {
      content: "网格员巡查发现东苑小区3号楼消防通道堆放杂物，立即联系物业清理并张贴警示通知。",
      type: "安全",
      state: "待处理",
      date: "2025-02-15 17:28"
    },
    {
      content: "西河社区独居老人张阿姨48小时未出门。网格员上门核实，确认老人感冒卧床，联动志愿者送药并安排每日健康随访。",
      type: "养老",
      state: "待处理",
      date: "2025-02-15 17:28"
    },
    {
      content: "环保网格员沿南沙河开展水质监测，锁定排污异常网格单元B-07。无人机航拍取证，环境局查处违规企业。",
      type: "环保",
      state: "待处理",
      date: "2025-02-15 17:28"
    },
    {
      content: "中山路餐饮网格开展“明厨亮灶”抽查，23家商户后厨视频接入监管平台。",
      type: "商业",
      state: "待处理",
      date: "2025-02-15 17:28"
    },
    {
      content: "市防汛指挥中心启动网格化应急预案。",
      type: "应急",
      state: "待处理",
      date: "2025-02-15 17:28"
    }
  ]

</script>
<style scoped lang="less">
  .content {
    padding:10px;
    background-color: #001a1dcc;
    width: 330px;
    margin-top: 5px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .top{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;
      .top_item{
        flex:1;
        padding:3px 10px 3px 3px;
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
        border: 1px solid;
        border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);
        .top_item_name{
          font-size: 10px;
          color: rgba(213, 242, 255, 1);
          flex:1;
        }
        .top_item_num{
          color: rgba(158, 247, 255, 1);
          font-weight: bold;
          font-size: 12px;
        }
        .top_item_leftIcon{
          background-image: url('/img/myimg/lefticon1.png');
          background-size: 17px 15px;
          width: 17px;
          height: 15px;
        }
      }
    }
}
</style>
